<template>
  <div class="plugin-option">
    <em-card
      v-if="activePlugin"
      :title="activePlugin.title"
      :icon="activePlugin.icon"
      roundless
      class="plugin-card"
    >
      <template
        v-if="!isChild"
        slot="toolbar"
      >
        <code-mirror
          icon="em-icon-script"
          :title="activePlugin.title"
          :code="activePlugin"
        />
      </template>
      <setting-option
        v-if="!hasChild && setting"
        v-model="setting"
      />
      <style-option
        v-if="!hasChild && styles"
        v-model="styles"
      />
      <header-option
        v-if="!hasChild && header"
        v-model="header"
      />
      <div
        v-for="(child,index) in children"
        :key="index"
        class="plugin-option-children"
      >
        <plugin-option
          :value="child"
          :is-child="hasChild"
        />
      </div>
      <data-option
        v-if="!hasChild && customItem"
        v-model="items"
        :setting="setting"
        :data-item-text="activePlugin.title"
        class="plugin-option__data"
      />
    </em-card>
  </div>
</template>

<script>
import CodeMirror from '@/components/CodeMirror'
import SettingOption from './components/SettingOption'
import StyleOption from './components/StyleOption'
import HeaderOption from './components/HeaderOption'
import DataOption from './components/DataOption'

export default {
  name: 'PluginOption',
  components: {
    CodeMirror,
    SettingOption,
    StyleOption,
    HeaderOption,
    DataOption
  },
  props: {
    value: {
      type: Object,
      required: true
    },
    isChild: {
      type: Boolean,
      default: false
    }
  },
  provide() {
    return {
      getComponentPlugin: () => this.activePlugin
    }
  },
  data() {
    return {
      showCode: false,
      inputOptions: {
        test: 1
      }
    }
  },
  computed: {
    activePlugin: {
      get() {
        return this.value
      },
      set(v) {
        this.value = v
      }
    },
    options() {
      return this.activePlugin && this.activePlugin.options
    },
    setting() {
      if (this.options && this.options.setting) {
        return this.options.setting
      }
      return null
    },
    styles() {
      if (this.options && this.options.styles) {
        return this.options.styles
      }
      return null
    },
    header() {
      if (this.options && this.options.header) {
        return this.options.header
      }
      return null
    },
    children() {
      if (this.options && this.options.children) {
        return this.options.children
      }
      return []
    },
    customItem() {
      if (this.setting) {
        return this.setting.customSource
      }
      return false
    },
    mockSize() {
      if (this.setting && this.setting.mockItems) {
        return this.setting.mockItems
      }
      return 0
    },
    hasChild() {
      if (this.options && this.options.children) {
        return true
      }
      return false
    },
    items() {
      var items = []
      if (this.options && this.options.items) {
        items = this.options.items
      }
      return items
    }
  },
  mounted() {
    console.log(this.value)
  },
  methods: {}
}
</script>

<style lang="scss">
.em-card__body {
  padding: 10px 0;
}
.plugin-option {
  &-children {
    padding: 10px;
  }
  & & {
    border: 2px solid red;
    border-radius: 5px;
    overflow: hidden;
  }
  &__data {
    .em-cell-group {
      padding: 16px;
    }
    .btn-edit {
      padding: 0.825rem 1.42rem;
      font-size: 1.08rem;
      line-height: 1.75;
      display: block;
      width: 100%;
      color: #ff6600;
    }
  }
  &__data,
  &__inner {
    .em-cell-group__title {
      color: #333;
      font-size: 16px;
    }
    .em-cell__title {
      color: #909399 !important;
    }
    .em-cell-group {
      &::after {
        border-width: 2px 0 0;
      }
    }
  }
}
.plugin-card.em-card {
  .em-card__header {
    .em-icon {
      font-size: 20px;
      color: #ff6600;
    }
    .em-card__label {
      font-size: 20px;
      font-weight: bold;
    }
  }
}
.radio-icon {
  .el-radio-button__inner {
    padding: 10px;
  }
}
.radio-color {
  .el-radio-button {
    &__inner {
      padding: 3px;
      border-radius: 4px !important;
      background-color: transparent !important;
      border: 1px solid #dcdfe6;
      box-shadow: none !important;
    }
    & + .el-radio-button {
      margin-left: 5px;
    }
  }
  .image-picker {
    margin-left: 5px;
  }
}
</style>
